<template>
	<view class="min-vh-100 bg-theme flex-col position-fixd w-100">
		<view class="mx-3 bg-white brs-12 mt-12 px-3 hh position-relative">
			<view class="d-flex justify-content-between align-items-center border-line py-3 pt-4">
				<view class="d-flex align-items-center">
					<text class=" text-666D73 font-500">头像</text>
					<view class="position-relative">
						<button open-type="chooseAvatar" class="btnc" @click="showloading" @chooseavatar="chooseavatar">
						</button>
						<image class="img-user ms-4 " :src="model.avatar" mode=""></image>
					</view>
				</view>
				<view class="">
					<button open-type="chooseAvatar" class="btn" @click="showloading" @chooseavatar="chooseavatar">
						<u-icon name="arrow-down" style="width: 16px;height: 16px;"></u-icon>
					</button>
				</view>
			</view>
			<view class="d-flex justify-content-between align-items-center border-line py-3">
				<view class="d-flex align-items-center">
					<text class=" text-666D73 font-500">昵称</text>
					<input type="nickname" @blur="getnickname" placeholder="请输入昵称" class="ms-4 "
						v-model="model.nickname" />
					<!-- 					<u-input class="ms-4 " placeholder="请输入昵称" v-model="model.nickname" type="nickname"
						:custom-style="inputStyle">
					</u-input> -->
				</view>
				<!-- <u-icon name="arrow-down"></u-icon> -->
			</view>
			<view class="d-flex justify-content-between align-items-center border-line py-3"
				@click="actionSheetShow=true">
				<view class="d-flex align-items-center">
					<text class=" text-666D73 font-500">性别</text>
					<u-input class="ms-4" placeholder="请选择性别" v-model="model.gender" type="text" disabled
						:custom-style="inputStyle">
					</u-input>
				</view>
				<u-icon name="arrow-down"></u-icon>
			</view>
			<view class="d-flex justify-content-between align-items-center border-line py-3">
				<view class="d-flex align-items-center">
					<text class=" text-666D73 font-500">电话</text>
					<u-input style="width: 250rpx;" disabled class="ms-4" placeholder="请输入手机号" v-model="model.mobile"
						type="text" :custom-style="inputStyle">
					</u-input>
				</view>
				<view>
					<button class="phone text-white bg-theme brs-18" open-type="getPhoneNumber"
						@getphonenumber="getphonenumber">绑定手机号</button>
				</view>
			</view>
			<!-- <view class="d-flex justify-content-between align-items-center border-line py-3">
				<view class="d-flex align-items-center">
					<text class=" text-666D73 font-500">电话</text>
					<u-input style="width: 250rpx;" disabled class="ms-4" placeholder="请输入手机号" v-model="model.mobile"
						type="text" :custom-style="inputStyle">
					</u-input>
				</view>
				<view>
					<button class="phone text-white bg-theme brs-18" open-type="getPhoneNumber"
						@getphonenumber="getphonenumber11">绑定手机号</button>
				</view>
			</view> -->
			<view class="d-flex justify-content-between align-items-center py-3" @click="handleBirth">
				<view class="d-flex align-items-center">
					<text class=" text-666D73 font-500">生日</text>
					<u-input class="ms-4" placeholder="请选择生日" v-model="model.birthday" type="text" disabled
						:custom-style="inputStyle">
					</u-input>
				</view>
				<u-icon name="arrow-down"></u-icon>
			</view>

			<view class="position-absolute save-action" @click="submit">
				<view class="save bg-theme text-white u-text-center">
					<text class="font-600">保存</text>
				</view>
			</view>
		</view>
		<u-action-sheet :list="actionSheetList" v-model="actionSheetShow" @click="actionSheetCallback"></u-action-sheet>
		<u-picker mode="time" v-model="birthdayCalenderShow"
			:params="{year: true,month: true,day: true,hour: false,minute: false,second: false}" @confirm="setBirthday">
		</u-picker>
		<!-- <u-action-sheet :actions="list" :title="title" v-model="show"></u-action-sheet> -->
		<!-- <<u-picker :show="show" :columns="columns"></u-picker> -->

	</view>
</template>

<script>
	import config from '@/config.js';
	import toast from 'uview-ui/libs/function/toast';
	const uploadUrl = config.baseUrl + '/api/common/upload'
	export default {
		data() {
			return {
				inputStyle: {
					fontSize: '16px',
					fontWeight: 400,

				},
				actionSheetList: [{
						text: '男'
					},
					{
						text: '女'
					},
					{
						text: '保密'
					}
				],
				radio: '',
				switchVal: false,
				labelStyle: {
					fontSize: '28rpx'
				},
				model: {
					avatar: '',
					nickname: '',
					gender: '',
					mobile: '',
					birthday: '',
				},
				actionSheetList: [{
						text: '男'
					},
					{
						text: '女'
					},
					{
						text: '保密'
					}
				],
				actionSheetShow: false,
				birthdayCalenderShow: false,
				errorType: ['message'],
			};
		},
		onLoad() {
			uni.hideShareMenu()
			if (!this.vuex_has_login) {
				return this.$u.toast('请先登录')
			} else {
				this.$u.api.getUserInfo().then(res => {
					// this.model = Object.assign(this.model, res.data) // 合并code, 要不后面错误
					this.model = res.data
				})
			}
		},
		onReady() {
			// this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			getphonenumber(res) {
				console.log(res);
				if (res.detail.errMsg == 'getPhoneNumber:fail user deny') {

				} else if ("getPhoneNumber:ok" == res.detail.errMsg) {
					this.$u.api.getUserPhoneFromMP({
							encryptedData: res.detail.encryptedData,
							iv: res.detail.iv,
						})
						.then(res => {
							this.model.mobile = res.data.phone
						})
				}
			},
			getphonenumber11(res) {
				console.log(res);
				if (res.detail.errMsg == 'getPhoneNumber:fail user deny') {

				} else if ("getPhoneNumber:ok" == res.detail.errMsg) {
					this.$u.api.getUserPhoneFromMPNew({
							code: res.detail.code,
						})
						.then(res => {
							if (res.code) {
								this.model.mobile = res.data.phone
							} else {
								this.$u.toast(res.msg)
							}

						})
				}
			},
			getnickname({
				detail: {
					value
				}
			}) {
				this.model.nickname = value;
			},
			submit() {
				if (!this.vuex_has_login) {
					return this.$u.toast('请先登录')
				}
				const {
					avatar,
					nickname,
					gender,
					mobile,
					birthday
				} = this.model
				// if (nickname && mobile) {
				this.$u.api.setUserInfo(this.model)
					.then(res => {
						console.log(res);
						if (1 == res.code) {
							this.$u.toast('保存成功')
							this.$u.vuex('vuex_user', {
								...this.model,
								...res.data
							})
						} else {
							this.$u.toast(res.msg);
						}
					})
				// } else {
				// 	this.$u.toast('至少填写昵称和电话');
				// }
			},
			// 点击actionSheet回调
			actionSheetCallback(index) {
				uni.hideKeyboard();
				this.model.gender = this.actionSheetList[index].text;
			},
			setBirthday(value) {
				this.model.birthday = value.year + "-" + value.month + "-" + value.day
			},
			handleBirth() {
				if (+this.vuex_user.is_realname) return this.$u.toast('实名认证后不支持修改')
				this.birthdayCalenderShow = true
			},
			chooseavatar({
				target: {
					avatarUrl
				}
			}) {
				uni.uploadFile({
					url: uploadUrl,
					filePath: avatarUrl,
					name: 'file',
					success: (res) => {
						let error = 0;
						if (200 == res.statusCode) {
							let data = JSON.parse(res.data)
							console.log(data);
							if (1 == data.code) {
								this.model.avatar = data.data.fullurl
							} else {
								error = 1
							}
						} else {
							error = 1
						}
						uni.hideLoading()
						if (1 == error) {
							this.$u.toast('头像上传失败');
						}
					}
				});
			},
			showloading() {
				uni.showLoading();
				setTimeout(() => {
					uni.hideLoading();
				}, 800)
			}
		}
	};
</script>

<style scoped lang="scss">
	.page {
		padding: 0 24rpx;
	}

	.border-line {
		border-bottom: 1px solid #f5f7f8;
	}

	.img-user {
		border-radius: 50%;
		width: 80rpx;
		height: 80rpx;

		.border-line {
			border-bottom: 1px solid #f5f7f8;
		}
	}

	.phone {
		width: 216rpx;
		height: 72rpx;
		line-height: 72rpx;
		// padding: 12rpx 28rpx;
	}

	.save-action {
		bottom: 96rpx;
		left: 50%;
		transform: translateX(-50%);

		.save {
			margin: 0 auto;
			width: 544rpx;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 40rpx 0 40rpx 40rpx;
		}
	}

	.hh {
		height: calc(100vh - 48rpx);
	}

	.btn {
		color: #333333;
		width: 16px;
		height: 16px;
		line-height: 16px;
		border: none;
		border-radius: 0;
		background-color: transparent;
		padding: 0;

		&::after {
			border: none;
		}
	}

	.btnc {
		top: 0;
		right: 0;
		width: 80rpx;
		height: 80rpx;
		position: absolute;
		border: none;
		border-radius: 50%;
		z-index: 55;
		background-color: transparent;
		padding: 0;

		&::after {
			border: none;
		}
	}
</style>